<template>
    <div class="box" v-if="isShow">
        <h3 v-if="title">{{ title }}</h3>
        <p class="box-content">{{ message }}</p>
    </div>
</template>

<script>
    export default {
        props: {
            title: {
                type: String,
                default: "",
            },
            message: {
                type: String,
                default: "警告提示",
            },
            duration: {
                type: Number,
                default: 2000, //默认1000毫秒消失
            },
        },
        data() {
            return {
                isShow: false, //是否显示标识
            };
        },
        methods: {
            show() {
                this.isShow = true;
                setTimeout(this.hide, this.duration); //设置时间自动消失
            },
            hide() {
                this.isShow = false;
                this.remove(); //移除
            },
        },
    };
</script>

<style lang="less">
    .box {
        position: fixed;
        width: 80%;
        min-height: 85px;
        background-color: rgb(0 0 0);
        background-size: 120%;
        background-attachment: fixed;
        background-position: center;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        left: 10%;
        top: 3%;
        color: #fff;
        border-radius: 6px;

        h3 {
            width: 100%;
            padding: 6px 10px;
            text-align: center;
            margin: 0;
            color: #ffd87f;
            border-bottom: 1px solid #616161;
        }

        .box-content {
            padding: 0 10px;
            margin: 10px 0;
            width: 100%;
            text-align: center;
        }
    }
</style>
